<template>
    <div class="selectBox" @click="openList" :class="{'open':showList}">
        <template v-if="val">
            <template v-for="(dt,i) in lists" :key="i">
                <!-- <label v-if="dt[keyValue]==val">{{dt[key]}}</label> -->
                <input type="text" v-if="dt[keyValue]==val" :value="dt[key]" readonly @blur="closeSelect"/>
            </template>
        </template>
        <template v-else>
            <input type="text" :value="placeholder" readonly @blur="closeSelect"/>
        </template>
        <!-- <select @change="getData" v-model="val">
            <option v-for="(dt,i) in lists" :key="i">{{dt.name}}</option>
        </select> -->
        <i></i>
        <ul class="selectList" v-if="showList">
            <li v-for="(dt,i) in lists" :key="i" @click.stop="getSelectItem(dt)" :class="{'select':dt[keyValue]==val}">{{dt[key]}}</li>
        </ul>
    </div>
</template>

<script>
import { reactive,toRefs,onMounted} from 'vue'
export default {
    props:{
        modelValue:String,
        placeholder:{
            type:String,
            default:'请选择'
        },
        lists:Array,
        key:{ // 索引名称
            type:String,
            default:'name'  // 默认显示name
        }, 
        keyValue:{ // 索引值
            type:String,
            default:'id'// 默认获取id
        }
    },
    setup(props,context) {
        const state = reactive({
            val:props.modelValue,
            showList:false
        })

        onMounted(()=>{
            
        })

        const getData = e=>{
            context.emit('update:modelValue', e.target.value)
        }

        const openList = ()=>{
            state.showList = !state.showList
        }

        const getSelectItem = (item)=>{
            if(item[props.keyValue] == state.val) {
                state.showList = false
                return
            }
            context.emit('update:modelValue', item[props.keyValue].toString())
            context.emit('change', item)
            state.showList = false
            state.val = item[props.keyValue]
        }

        const closeSelect = ()=>{
           setTimeout(()=>{
               state.showList = false
           },200) 
        }

        return {
            ...toRefs(state),
            getData,
            openList,
            getSelectItem,
            closeSelect
        }
    },
}
</script>

<style lang="scss" scoped>
    .selectBox{
        position: relative;
        z-index: 10;
        width: 100%;
        height: 70px;
        border: 2px solid #fff;
        line-height: 66px;
        border-radius: 10px;
        padding: 0 55px 0 16px;
        &.open{
            z-index: 100;
            .selectList{
                z-index: 101;
            }
        }
        i{
            position: absolute;
            z-index: 10;
            width: 24px;
            height: 24px;
            right: 21px;
            top: 24px;
            background: url(/images/jt.png) left top no-repeat;
        }
        label,input{
            font-size: 28px;
            color: #fff;
            background: none;
            border: 0;
            width: 100%;
            height: 100%;
            outline: none;
        }
        .selectList{
            position: absolute;
            z-index: 12;
            left: 0;
            top:70px ;
            width: 100%;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            li{
                height: 56px;
                line-height: 56px;
                font-size: 26px;
                padding: 0 15px;
                &:hover,&.select{
                    background: #efefef;
                }
            }
        }
        select{
            position: absolute;
            z-index: 12;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 0;
            opacity: 0;
            option{
                padding: 10px 0;
            }
        }
    }
</style>